<!DOCTYPE html>  
<html>  
<head>
    <meta content="target-densitydpi=device-dpi,width=640, user-scalable=0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="email=no,address=no,telephone=no">
    <title></title>  
    <meta charset="utf-8"/>  
  
    <style type="text/css">
    body,html{height:100%; margin:0; padding:0; overflow:hidden;}
    body{background:url(images/ljfl_bg.jpg) bottom no-repeat #baeaff;}
    .goods{width:140px; height:140px; background:url(images/goods1.png); position:absolute; top:20px; left:250px;}
    .box_ctn{width:640px; height:80px; position:absolute; bottom:300px; left:0;}
    .box_ctn .box1{width:25%; height:300px;  float:left;}
    .right,.wrong{width:100px; height:100px; position:absolute; opacity:0;}
    .right{background:url(images/right.png);}
    .wrong{background:url(images/wrong.png);}
    .count{text-align:center; font-size:30px; color:#000;}
    </style>  
  
   
      
  
</head>  
<body>  
<div id="count" class="count"></div>
<div id="goods" class="goods"></div>

<div class="box_ctn">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</div>
<div class="right"></div>
<div class="wrong"></div>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/dist/zepto.js"></script>

<script type="text/javascript">
    
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var goods = document.getElementById('goods');
    var hammertime = new Hammer(goods);
    var windowH = $(window).height();
    var position = {
        'x':270,
        'y':20
    }
    //添加事件
    hammertime.on("pan", function (e) {
        //document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
        var top = position.y+e.deltaY,
            left = position.x+e.deltaX;
        $(goods).css({'top':top,'left':left});
        //console.log("X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />")
        if (top < 0 ) {
          $(goods).css({'top':0});  
        }
        if (top > windowH-140 ) {
          $(goods).css({'top':windowH-140});  
        }
        if (left < 0 ) {
          $(goods).css({'left':0});  
        }
        if (left > 500 ) {
          $(goods).css({'left':500});  
        }
    });

   

    hammertime.on("panend", function(e) {
        position = {'x':e.target.offsetLeft,'y':e.target.offsetTop};
        if (index < goodsArr.length-1) {
            if (position.y > 500) {
                if (position.x < 90) {
                    if (goodsArr[index].answer === 'a') {
                        $(goods).animate({'top':windowH-140,'left':30,'opacity':0},200,'',function() {
                            back()
                        });
                        position = {'x':e.target.offsetLeft,'y':e.target.offsetTop};
                        initGoods(index++);
                        showRrightOrWrong(0,true);
                    }else {
                        $(goods).animate({'top':20,'left':250},200);
                        position = {'x':270,'y':20};
                        showRrightOrWrong(0,false);
                    }                
                }else if (position.x >=90 && position.x < 230) {
                    if (goodsArr[index].answer === 'b') {
                        $(goods).animate({'top':windowH-140,'left':190,'opacity':0},200,'',function() {
                            back()
                        });
                        position = {'x':e.target.offsetLeft,'y':e.target.offsetTop};
                        initGoods(index++);
                        showRrightOrWrong(1,true);
                    }else {
                        $(goods).animate({'top':20,'left':250},200);
                        position = {'x':270,'y':20};
                        showRrightOrWrong(1,false);
                    } 
                }else if (position.x >= 230 && position.x < 390) {
                    if (goodsArr[index].answer === 'c') {
                        $(goods).animate({'top':windowH-140,'left':350,'opacity':0},200,'',function() {
                            back()
                        });
                        position = {'x':e.target.offsetLeft,'y':e.target.offsetTop};
                        initGoods(index++);
                        showRrightOrWrong(2,true);
                    }else {
                        $(goods).animate({'top':20,'left':250},200);
                        position = {'x':270,'y':20};
                        showRrightOrWrong(2,false);
                    }  
                }else if (position.x >= 390) {
                    if (goodsArr[index].answer === 'd') {
                        $(goods).animate({'top':windowH-140,'left':510,'opacity':0},200,'',function() {
                            back()
                        });
                        position = {'x':e.target.offsetLeft,'y':e.target.offsetTop};
                        initGoods(index++);
                        showRrightOrWrong(3,true);
                    }else {
                        $(goods).animate({'top':20,'left':250},200);
                        position = {'x':270,'y':20};
                        showRrightOrWrong(3,false);
                    }  
                }
                
            }
        }else {
            $(goods).animate({'top':windowH-140,'opacity':0},200);
            alert('全部答完了');
        };
    })

    document.body.ontouchmove=function(e){
        e.preventDefault();
    }

    var goodsArr = [
        {background : 'images/goods1.png', answer : 'd'},
        {background : 'images/goods2.png', answer : 'b'},
        {background : 'images/goods3.png', answer : 'd'},
        {background : 'images/goods4.png', answer : 'b'},
        {background : 'images/goods5.png', answer : 'd'},
        {background : 'images/goods6.png', answer : 'b'},
        {background : 'images/goods7.png', answer : 'd'},
        {background : 'images/goods8.png', answer : 'b'},
        {background : 'images/goods9.png', answer : 'd'}
    ];
    var index = 0;

    function initGoods(index) {
    }

    function back() {
        position = {'x':270,'y':20};
        $(goods).css({'background-image':'url(images/load.gif)'});
        $(goods).css({'top':20,'left':250,'background-image':'url('+goodsArr[index].background+')'}).animate({'opacity':1},200);
    }

    var right = $('.right'),
        wrong = $('.wrong'),
        rightCount = 0;
    function showRrightOrWrong(i,status) {
        if (status) {
            $(right).css({'bottom':250,'left':40+140*i,'opacity':1}).animate({'bottom':350,'opacity':0},200);
            rightCount++;
        }else {
            $(wrong).css({'bottom':250,'left':40+140*i,'opacity':1}).animate({'bottom':350,'opacity':0},200); 
        };
    }


    $(document).ready(function(){
        var ele = $("#count");
        var t = 25000;
        function GetRTime(){ 
            t = t -1000;
            var m=0;
            var s=0;
            if(t>=0){
              m=Math.floor(t/1000/60%60);
              s=Math.floor(t/1000%60);
            }else {
                $.ajax({
                    url: "",
                    type: "post",
                    data: {
                    },
                    success: function(result) {
                    }
                });
            }
            
            ele.html("倒计时："+m + "分" + s + "秒");
        }
      GetRTime();
      setInterval(GetRTime,1000);
    })
</script>  
  
</body>  
</html>  